/*
 * @Author: xuhongling
 * @Date:   2023-08-27 10:51:00
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2023-11-23 17:06:39
 */
import dayjs from 'dayjs';
import { Hformat } from '@/hooks/web/useHQPFormat';

// ECharts Option
const setChartOption = (chartData, selectedYears, selectedType, stationData) => {
  const legendOption: any = [];
  const seriesData: any = [];
  const chartDataObj: any = {};
  for (const year in chartData) {
    chartDataObj[year] = [];
    for (let i = 0; i < chartData[year].length; i++) {
      chartDataObj[year].push(chartData[year][i][selectedType]);
      if (!chartDataObj.time) {
        chartDataObj.time = [];
      }
      chartDataObj.time.push(dayjs(chartData[year][i].tmMin).format('MM-DD'));
      chartDataObj.time = Array.from(new Set(chartDataObj.time));
    }
  };
  selectedYears.map((item)=>{
    legendOption.push({name: `${item}`});
    seriesData.push({
      name: `${item}`,
      type: 'line',
      showSymbol: false,
      connectNulls: true,
      lineStyle: {
        width: 2,
      },
      data: chartDataObj[item]
    });
  });
  const legendData = {
    type: 'scroll',
    left: 'center',
    top: '44',
    itemWidth: 20,
    itemHeight: 10,
    data: legendOption,
  }

  const yAxisData = {
    type: 'value',
    position: 'left',
    name: '水位(m)',
    scale: true,
    splitNumber: 5,
    boundaryGap: ['0%', '5%'],
    nameTextStyle: {
      color: '#333',
    },
    axisTick: {
      show: false,
      inside: true,
      lineStyle: {
        color: '#999',
      },
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#333',
      },
    },
    axisLabel: {
      show: true,
      color: '#333',
      fontSize: 12,
      formatter(value) {
        if (value) {
          return Hformat(value);
        }
      },
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dashed',
        color: '#f4f4f4',
      },
    },
  }

  // 设置 ECharts Option
  const chartOption = {
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
    title: {
      text: `${stationData.stnm}历史同期对比`,
      left: 'center',
      top: '10',
      textStyle: {
        fontSize: 16,
      },
    },
    legend: legendData,
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartDataObj.time,
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#333',
        },
      },
      axisTick: {
        show: true,
        inside: true,
        interval: 'auto',
        lineStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#f4f4f4',
        },
      },
      axisLabel: {
        show: true,
        margin: 14,
        color: '#333',
        fontSize: 12,
      },
    },
    yAxis: yAxisData,
    series: seriesData,
  };
  return chartOption;
};

export default setChartOption;
